<template>
  <Card :bordered="false" dis-hover>
    <div class="ivu-pt-8 ivu-mb-16">
      <Row>
        <Input
          v-width="260"
          placeholder="请输入微信号、昵称、备注"
          clearable
          v-model="params.keyword"
          @on-enter="askData1"
          @on-clear="askData1"
        />
        <!-- <Select v-width="150" clearable class="ivu-ml-16" placeholder="请选择项目">
                    <Option v-for="item in projectList" :value="item.value" :key="item.value">{{item.label}}</Option>
        </Select>-->
        <Select
          v-width="150"
          clearable
          class="ivu-ml-16"
          placeholder="请选择在线状态"
          v-model="params.isonline"
          @on-change="askData2"
        >
          <Option
            v-for="item in statusList"
            :value="item.value"
            :key="item.value"
            >{{ item.title }}</Option
          >
        </Select>
      </Row>
    </div>
    <Table
      highlight-row
      :loading="loading"
      :columns="columns"
      :data="list"
      border
      @on-sort-change="sortchange"
    >
      <template slot="wechat" slot-scope="{ row }">
        <a>
          <Avatar
            shape="square"
            size="large"
            class="ivu-fl"
            :src="row.avatar"
          />
          <span class="ivu-ml-8">{{ row.wechatnick }}</span>
          <br />
          <span class="ivu-ml-8 ivu-weixin">微信号：{{ row.wechatno }}</span>
        </a>
      </template>
      <template slot="status" slot-scope="{ row }">
        <Tag v-if="row.status === 0">正常</Tag>
        <Tag v-if="row.status === 1" color="primary">停用</Tag>
      </template>
      <template slot="isonline" slot-scope="{ row }">
        <Badge v-if="+row.isonline === 0" status="success" text="在线" />
        <Badge v-else status="default" text="离线" />
      </template>
      <template slot="status" slot-scope="{ row }">
        <Badge v-if="+row.status === 1" status="success" text="正常" />
        <Badge v-if="+row.status === 0" status="error" text="停用" />
      </template>
      <template slot="operation" slot-scope="{ row }">
        <!-- <a @click="handleReport(row)">报表</a>
        <Divider type="vertical"></Divider>-->
        <a
          v-if="+row.status === 1"
          v-hasC="{
            name: 'setting-customer-update-customer',
            flag: 'v1/setting/customer/update-customer',
          }"
          @click="handleEdit(row)"
          >编辑</a
        >
      </template>
    </Table>
    <div class="ivu-mt ivu-text-center">
      <Page
        show-total
        show-elevator
        show-sizer
        :total="total"
        :current.sync="params.page"
        :page-size="params.pageSize"
        :page-size-opts="pageOpts"
        @on-change="formSize"
        @on-page-size-change="formChangePage"
      />
    </div>
    <Modal
      v-model="modalEdit"
      title="编辑"
      @on-cancel="handleDrawerCancel('formItem')"
    >
      <Form
        :label-width="100"
        label-position="left"
        :model="paramsedit"
        ref="formItem"
        :rules="createRules"
      >
        <FormItem label="微信昵称：">
          <Input v-model="paramsedit.wechatnick" disabled />
        </FormItem>
        <!-- <FormItem label="备注：" prop="remark"> -->
        <FormItem label="备注：">
          <Input type="textarea" v-model="paramsedit.remark" row="3" />
        </FormItem>
        <FormItem label="状态：">
          <Switch v-model="paramsedit.status" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="handleDrawerCancel('formItem')">取消</Button>
        <Button
          type="primary"
          :loading="remarksloading"
          @click="handleSubmit('formItem')"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import {
  settingcustomerlist,
  settingcustomerupdatecustomer,
} from "@/api/hqapi";
export default {
  name: "kefuPhone",
  data() {
    return {
      projectList: [],
      statusList: [],
      modalEdit: false,
      remarksloading: false,
      columns: [
        {
          title: "微信信息",
          slot: "wechat",
          width: 350,
          fixed: "left",
        },
        {
          title: "性别",
          key: "gender",
          width: 80,
        },
        {
          title: "是否在线",
          slot: "isonline",
          width: 125,
        },
        {
          title: "登录设备",
          key: "deviceid",
          width: 180,
        },
        {
          title: "好友数",
          key: "friend_cnt",
          sortable: "custom",
          width: 100,
        },
        {
          title: "使用人",
          key: "account",
          width: 120,
        },
        {
          title: "状态",
          slot: "status",
          width: 100,
          sortable: "custom",
        },
        {
          title: "备注",
          key: "remark",
          minWidth: 100,
        },
        {
          title: "操作",
          slot: "operation",
          width: 118,
        },
      ],
      createRules: {
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
      }, // 模态框验证规则
      list: [],
      loading: false,
      // 请求参数
      params: {
        page: 1,
        pageSize: 10,
        order_status: "",
        order_count: "",
        isonline: "",
        keyword: "",
      },
      paramsedit: { id: undefined, status: true, remark: "", wechatnick: "" },
      total: 0,
      pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    // 初始化
    initial() {
      this.askData();
    },
    // 请求数据
    askData() {
      this.loading = true;
      settingcustomerlist(this.params).then((res) => {
        this.logs(res);
        this.total = res.list.total;
        this.list = res.list.list;
        this.statusList = res.online;
        this.loading = false;
      });
    },
    askData1() {
      this.params.page = 1;
      this.params.isonline = "";
      this.askData();
    },
    askData2() {
      this.params.page = 1;
      this.askData();
    },
    /* @函数功能: 分页 */
    formSize(e) {
      this.params.page = e;
      this.askData();
    },
    /* @函数功能: 每页数量 */
    formChangePage(e) {
      this.params.pageSize = e;
      this.askData();
    },
    // handleReport() {},
    handleEdit(row) {
      this.modalEdit = true;
      this.paramsedit = {
        id: row.id,
        wechatnick: row.wechatnick,
        remark: row.remark,
        status: +row.status === 1,
      };
    },
    sortchange(e) {
      this.logs(e);
      if (e.key === "friend_cnt") {
        if (e.order === "desc") this.params.order_count = 2;
        else if (e.order === "asc") this.params.order_count = 1;
        else this.params.order_count = 0;
        this.params.order_status = "";
      } else {
        if (e.order === "desc") this.params.order_status = 2;
        else if (e.order === "asc") this.params.order_status = 1;
        else this.params.order_status = 0;
        this.params.order_count = "";
      }
      this.askData();
    },
    handleDrawerCancel(name) {
      this.$refs[name].resetFields();
      this.modalEdit = false;
      this.paramsedit = {
        id: undefined,
        wechatnick: "",
        remark: "",
        status: true,
      };
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.logs(1, name);
          let config = {
            id: this.paramsedit.id,
            status: this.paramsedit.status ? 1 : 0,
            remark: this.paramsedit.remark,
          };
          this.remarksloading = true;
          setTimeout(() => {
            this.remarksloading = false;
          }, 1000);
          settingcustomerupdatecustomer(config).then(() => {
            this.$Message.success("编辑成功");
            this.askData();
            this.modalEdit = false;
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.ivu-weixin {
  color: #777;
  font-size: 12px;
}

.sky-wxid {
  color: #777;
  margin-top: 2px;
  font-size: 12px;
}

.sky-record {
  border: 1px solid #dcdcdc;
  min-height: 600px;
}

.ivu-active {
  border: 1px solid #2d8cf0;
}
</style>
